<!--商品列表-->
<template>
  <div class="container">
    <el-form :inline="true"  >
    <el-form-item>
      <el-input  v-model="dataForm.paramKey1" placeholder="书名" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-input  v-model="dataForm.paramKey2" placeholder="作者名" ></el-input>
    </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="bookCode"
        header-align="center"
        align="center"
        width="80"
        label="图书编码">
      </el-table-column>
      <el-table-column
        prop="img"
        header-align="center"
        align="center"
        width="120"
        label="展示图片">
        <template slot-scope="scope">
          <img width="80px" height="80px" :src="scope.img"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="bookName"
        header-align="center"
        align="center"
        width="80"
        label="书名">
      </el-table-column>
      <el-table-column
        prop="publisher"
        header-align="center"
        align="center"
        label="出版社">
      </el-table-column>

      <el-table-column
        prop="author"
        header-align="center"
        align="center"
        width="80"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="价格">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a>查看详情</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataListLoading: false,
      dataList: [
        {
          bookCode:'1',
          bookName:'书名',
          img:'#',
          author:'无名',
          publisher: '无名书社',
          price:'100.00'+'元',

        }
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        paramKey1: '',
        paramKey2: '',
      },
    };
  },
  methods: {
    getDataList () {}

  }
}

</script>
